<template>
    <div class="account-info-wrapper">
        <Card>
            <p slot="title" class="sub-title">
                <span class="account-type">订单列表</span>
            </p>

            <!-- 搜索条件 -->
            <Row class="margin-bottom-20" type="flex">
                <Col>
                <span style="margin-right:5px">关键字:</span>
                <Input v-model="keyword" placeholder="设备型号/设备SN" style="width: 200px" />
                    </Col>
                <Col style="margin-left:20px">
                <Button type="primary" @click="initData(1)">搜索</Button>
                </Col>
            </Row>

            <!-- 订单表格 -->
            <Table :columns="columns" :data="tableData" :loading="loading"></Table>
            <Page class="margin-top-10 text-center" :current.sync="pagination.current" :total="pagination.total" :page-size="pagination.limit" @on-change="initData"></Page>
        </Card>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
export default {
  name: 'order-detail',
  props: {
    orderId: [Number, String]
  },
  data () {
    return {
      pagination: {
        current: 1,
        total: 1,
        limit: 20
      },
      keyword: '', // 搜索关键词
      order_id: null, // 订单id
      tableData: [], // 表格数据
      loading: false, // 是否展示loading
      columns: [
        // 表格配置
        {
          title: '产品型号',
          align: 'center',
          render: (h, p) => h('span', p.row.device_product.name)
        },
        {
          title: '成交单价',
          align: 'center',
          key: 'unit_price'
        },
        {
          title: '库存状态',
          align: 'center',
          key: 'status_msg'
        },
        {
          title: '安装工单编号',
          align: 'center',
          key: 'ticket_sn'
        },
        {
          title: '设备型号',
          align: 'center',
          render: (h, p) => {
            return h('span', p.row.model_info && p.row.model_info.name)
          }
        },
        {
          title: '设备SN',
          align: 'center',
          key: 'device_sn'
        }
      ]
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    async initData (page) {
      this.pagination.page = page
      try {
        this.loading = true
        const { limit } = this.pagination
        const params = {
          limit,
          offset: (page - 1) * limit,
          keyword: this.keyword || null
        }
        const res = await http.req(api.order_detail, [this.orderId], params)
        this.tableData = res.rows
        this.pagination.total = res.count
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
